<template>
  <transition name="fade-transform" mode="out-in">
    <div class="notice-card__wrap" v-if="showCard">
    <div class="notice-card">
      <div class="notice-card__top">
         <div class="card-top_l">
           <div class="avatar-card">
             <yun-avatar :userId="fromId!=='SYS'?fromId:''" :src="fromAvatar" size="42px" :name="fromName"></yun-avatar>
             <div v-if="status===0" class="red-dot"></div>
           </div>
           <div class="info-box">
             <div class="info1">
               <p class="name">{{fromName}}</p>
<!--               <p class="thing">{{thing}}</p>-->
               <p class="date">{{dataConvert(createTime)}}</p>
             </div>
             <div class="info2" v-html="msgContent"></div>
           </div>

         </div>
        <div v-if="status===1"  class="card-top_r">
          <p class="read">消息已读</p>
          <p class="delete" @click="showAlert">
            <yun-icon class="close" name="delete"></yun-icon>
          </p>
        </div>
        <div v-if="status===0"  class="card-top_r">
          <p class="unread" @click="dataPutRead">R</p>
          <p class="delete" @click="showAlert">
            <yun-icon class="close" name="delete" ></yun-icon>
          </p>
        </div>
      </div>
<!--      <div class="notice-card__bottom">-->
<!--        <div class="comment-card">-->
<!--          <div class="info1">-->
<!--            <span class="name">{{commentName}}:</span>-->
<!--            <span class="comment">{{commentContent}}</span>-->
<!--          </div>-->
<!--          <p class="info2">{{commentDate}}</p>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
  </transition>
</template>


<script>
  import {dateConvert} from "../../action/utils/dataConvert";
  import config from "../../action/config";

  export default {
    name:'noticeCard',
    data(){
      return{
        createTime:'',
        msgContent:'',
        fromId:'',
        fromName:'',
        fromAvatar:'',
        toId :'',
        status :'',
        messageId :'',
        showCard:true,

      }
    },
    props:{
      info:{
        type:Object,
        default:()=>({})
      }
    },

    created() {
      this.dataGet2Info()
    },
    methods:{
      dataConvert(date){
        return dateConvert(date)
      },

      dataGet2Info(){
        let info = this.info;
        this.createTime = info.createTime;
        this.msgContent = info.msgContent;
        this.fromId = info.fromId;
        this.fromName = info.fromName;
        this.fromAvatar = info.fromAvatar;
        this.toId = info.toId;
        this.status = info.status;
        this.messageId = info.messageId;
      },

      dataPutRead() {
        this.$axios.$put(config.api.put.Message.read+this.messageId+'/read').then((response) => {
          if (response.code=== 0) {
            this.$message({
              type: 'success',
              message: '已标记已读'
            });
            this.status =1
            this.$axios.$get(config.api.get.Message.count).then(response => {
              if (response.code === 0) {
                this.$store.commit('message/setUnReadCount', response.data.unReadCount);
              }
            })
          } else {
            this.$message({
              type: 'warning',
              message: '操作失败'
            });
          }
        })
      },


      showAlert(){
        this.$alert('确认删除？', '', {
          confirmButtonText: '确定',
          callback: action => {
            this.dataDeleteMessage()
          }
        });
      },

      dataDeleteMessage() {
        this.$axios.$delete(config.api.delete.Message.delete+this.messageId).then((response) => {

          if(response.code===0){
            this.$message({
              type: 'success',
              message: '已删除消息！'
            });
            this.showCard = false;
            this.$axios.$get(config.api.get.Message.count).then(response => {
              if (response.code === 0) {
                this.$store.commit('message/setUnReadCount', response.data.unReadCount);
              }
            })
          }else{
            this.$message({
              type: 'warning',
              message: '删除消息失败！'
            });
          }

        })


      },

    }
  }
</script>


<style lang="scss">

  .notice-card__wrap{
    .notice-card{
      background-color: #fff;
      width:890*$length;
      padding:18*$length 24*$length 20*$length;
      border-bottom:1px solid #EFEFEF;
      .notice-card__top{
        @extend %flex-row-spb;
        align-items: flex-end;
        .card-top_l{
          @extend %flex-row-spb;
          align-items: flex-start;
          justify-content: flex-start;
          .avatar-card{
            width:48*$length;
            height:48*$length;
            @extend %flex-row-center;
            position: relative;
            .red-dot{
              position: absolute;
              right:-1*$length;
              top:-1*$length;
              height:6*$length;
              width:6*$length;
              border-radius: 3*$length;
              background-color: #FF7474;

            }
          }

          .info-box{
            margin-left: 14*$length;
            width:646*$length;
            .info1{
              @extend %flex-row-spb;
              justify-content: flex-start;
              .name{
                @include fontStyle(12,16,500,#000,left);
              }
              .thing{
                margin-left:14*$length;
                @include fontStyle(12,16,500,#333,left);

                span{
                  color:#00AAE6;
                }

              }
              .date{
                margin-left:14*$length;
                @include fontStyle(12,16,500,#999,left);

              }
            }

            .info2{
              margin-top: 18*$length;
              @include fontStyle(12,20,500,#333,left);
              height:auto;
              word-break: break-word;
              >a {
                color: #00AAE6
              }
            }

          }
        }

        .card-top_r{
          height:100%;
          @extend %flex-row-spb;
          .delete{
            margin-left: 10*$length;
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(12,36,500,#fff,center);
            background-color: #FF7474;
            border-radius: 18*$length;
            width:36*$length;
            @extend %flex-row-center;
            .close{
              font-size:12*$font-size; ;
            }

            &:hover{
              filter:brightness(130%);
            }
          }
          /*justify-content: flex-end;*/
          .unread{
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(12,36,500,#fff,center);
            background-color: #00AAE6;
            border-radius: 18*$length;
            width:36*$length;

            &:hover{
              filter:brightness(130%);
            }
          }
          .read{
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(12,36,500,#999,center);
            background-color: #fff;
            border-radius: 4*$length;
            width:90*$length;

            &:hover{
              filter:brightness(130%);
            }
          }

          h6{
            @extend %animate-transition;

            @extend %cursorPointer;
            @include fontStyle(12,36,500,#aaa,center);
            background-color: #fff;
            border-radius: 4*$length;
            width:100*$length;
            border:1px solid #F0F0F0;
            &:hover{
              filter:brightness(110%);
            }
          }
        }
      }

      .notice-card__bottom{
        @extend %flex-row-spb;
        justify-content: flex-end;
        .comment-card{
          width:834*$length;
          box-sizing: border-box;
          padding:14*$length 16*$length;
          background-color: #F4F8FA;
          border-radius: 4*$length;
          margin-top:20*$length;

          .info1{
            text-align: left;
            .name{
              @include fontStyle(14,22,500,#666,left)
            }
            .comment{
              @include fontStyle(14,22,500,#333,left)
            }
          }
          .info2{
            margin-top: 10*$length;
            @include fontStyle(12,16,500,#999,left)
          }
        }
      }
    }
  }

</style>
